<template>
    <div class="app-container">
      <div class="mapDiv">
        <lifelineEngineeringData
          :closeSelectBool="closeSelectBool"
          :layerInfo="layerInfo"
          :removeLayer="removeLayerList"
          @openSelectTool="openSelectTool"
          @getLegendHtml="getLegendHtml"
        />
        <div v-if="openSelectBool" class="new-uploadDiv1">
          <el-form :model="queryParams" label-width="120px" style="padding-top: 30px;">
            <el-form-item label="省">
              <el-select v-model="queryParams.dataRangeProvince" placeholder="请选择" @change="chooseProvince" clearable>
                <el-option v-for="item in provinceData" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市">
              <el-select v-model="queryParams.dataRangeCity" placeholder="请选择" @change="chooseCity" clearable>
                <el-option v-for="item in cityData" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区/县">
              <el-select v-model="queryParams.dataRangeArea" placeholder="请选择" @change="chooseArea" clearable>
                <el-option v-for="item in areaData" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型">
              <el-select v-model="queryParams.dataType" placeholder="请选择" clearable>
                <el-option v-for="item in dataTypeInfoArray" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div style="padding: 5px 0px 0 120px;">
            <el-button type="primary" @click="selectLayers">查询图层</el-button>
            <!-- <el-button type="primary" style="margin-left:30px">查询列表</el-button> -->
            <el-button style="margin-left:70px" @click="closeSelectTool">关闭</el-button>
          </div>
        </div>
        <!--图层图例-->
        <!-- <div class="new-layerLegendDiv">
          <p @click="showHideLayerDiv">
            <template v-if="showHideLayerDivBool==false">
              <img title="打开图层选择" src="@/assets/map/image/newImage/layer.png">
              <span style="color:#3a385e;">图层</span>
            </template>
            <template v-else>
              <img title="关闭图层选择" src="@/assets/map/image/newImage/layer-r.png">
              <span style="color:#107ce5;">图层</span>
            </template>
          </p>
          <p class="new-layerLengendDiv-split"></p>
          <p @click="showHideLegendDiv">
            <template v-if="showHideLegendDivBool==false">
              <img title="打开图例" src="@/assets/map/image/newImage/legend.png">
              <span style="color:#3a385e;">图例</span>
            </template>
            <template v-else>
              <img title="关闭图例" src="@/assets/map/image/newImage/legend-r.png">
              <span style="color:#107ce5;">图例</span>
            </template>
          </p>
        </div> -->
        <!--图层选择-->
        <!-- <div v-if="showHideLayerDivBool == false" class="new-layerSelectDiv">
          <el-cascader v-model="lsyerName" placeholder="请选择图层"
                      :options="layerOptions" :props="layerProps" @change="chooseLayers"
                      separator="," collapse-tags collapse-tags-tooltip clearable></el-cascader>
        </div> -->
        <!--图层图例-->
        <div v-if="showHideLegendDivBool" class="layerMap-legend">
          <!--滚动条-->
          <el-scrollbar max-height="500px">
            <p>图例</p>
            <div v-for="item in layerShowHideArray" :key="item.name" v-show="item.show" v-html="item.legendHtml">
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
</template>
<script setup name="lifelineEngineeringData">
import lifelineEngineeringData from '@/map/disasterManage/lifelineEngineeringData/indexMap.vue'
import MapLayers from '@/map/disasterManage/lifelineEngineeringData/index.vue';
import useEventStore from "@/store/modules/event";
import { getProvince, getProvince2, getChildArea } from "@/api/system/division"
import { iServerHttp } from "@/map/projMap.js";
import { ref } from 'vue';
const currentEvent = computed(() => useEventStore().currentEvent);
const { proxy } = getCurrentInstance();
const data = reactive({
    dataLayer: [
        {id: '1', label: '现场采集人员信息'},
        {id: '2', label: '车辆信息'},
    ],
    queryParams: {
      dataTypeCode: '',
      dataRangeCountry: '1',
      dataRangeProvince: '',
      dataRangeCity: '',
      dataRangeArea:'',
      dataType: '',
      dataRangeText:'',//版本范围当前选择内容
      dataLayerText:'',//数据图层当前选择内容
      dataTypeCodeSearchText:'',//搜索版本号输入框文本
    },
    queryParamsNew: {
      dataRangeProvince: '',//省ID
      dataRangeCity: '',//市ID
      dataRangeArea:'',//区县ID
    },
    layerInfoParams: {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
      code:"",
      name:"",
      sqlText:'',
      show:false
    },
})
let {dataLayer,queryParams,queryParamsNew,layerInfoParams} = toRefs(data);
const defaultProps = {
  url: 'children',
  label: 'label',
}
const lsyerName = ref('')
const showHideLayerDivBool = ref(false)
const removeLayerList = ref(false)
const layerProps = ref({ multiple: true });//图层选择--多选
const openSelectBool = ref(false)
const closeSelectBool = ref(false)
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const layerOptions = ref([
  {label:"地下管网",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_dx_pipe_network@fxfzczt"},
  {label:"供水-水厂泵房",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_waterworks@fxfzczt"},
  {label:"供水-水厂水池",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_pool@fxfzczt"},
  {label:"燃气-储气罐",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_air_receiver@fxfzczt"},
  {label:"交通-桥梁",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_bridge@fxfzczt",
    children:[{label:"交通-桥梁-点要素",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_bridge_point@fxfzczt"},
        {label:"交通-桥梁-线要素",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_bridge_line@fxfzczt"}]
  },
  {label:"交通-道路",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_road@fxfzczt"},
  {label:"电力-变电站",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_transformer_substation@fxfzczt"},
  {label:"电力-架空线路",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_overhead_line@fxfzczt"},
  {label:"电力-电缆线路",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_cable_route@fxfzczt"},
  {label:"电力-重要发电厂房",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_important_powerhouse@fxfzczt"},
  {label:"通信-通信室内设备",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_comm_indoor_equipment@fxfzczt"},
  {label:"通信-电视塔",name:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_tv_tower@fxfzczt"},
])
//数据类型
const dataTypeInfoArray = ref([
  {code:"1",name:"地下管网",table:"czt_dx_pipe_network",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_dx_pipe_network@fxfzczt",zIndex:4,fieldId:"cdpn_id"},
  {code:"2",name:"供水-水厂泵房",table:"czt_waterworks",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_waterworks@fxfzczt",zIndex:5,fieldId:"cw_id"},
  {code:"3",name:"供水-水厂水池",table:"czt_pool",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_pool@fxfzczt",zIndex:5,fieldId:"cp_id"},
  {code:"4",name:"燃气-储气罐",table:"czt_air_receiver",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_air_receiver@fxfzczt",zIndex:5,fieldId:"car_id"},
  {code:"5",name:"交通-桥梁",table:"czt_bridge",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_bridge@fxfzczt",zIndex:5,fieldId:"cb_id",
    children:[{code:"5",name:"交通-桥梁-点要素",table:"czt_bridge_point",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_bridge_point@fxfzczt",zIndex:5,fieldId:"cb_id"},
        {code:"5",name:"交通-桥梁-线要素",table:"czt_bridge_line",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_bridge_line@fxfzczt",zIndex:5,fieldId:"cb_id"}]
  },
  {code:"6",name:"交通-道路",table:"czt_road",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_road@fxfzczt",zIndex:4,fieldId:"cr_id"},
  {code:"7",name:"电力-变电站",table:"czt_transformer_substation",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_transformer_substation@fxfzczt",zIndex:5,fieldId:"cts_id"},
  {code:"8",name:"电力-架空线路",table:"czt_overhead_line",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_overhead_line@fxfzczt",zIndex:4,fieldId:"col_id"},
  {code:"9",name:"电力-电缆线路",table:"czt_cable_route",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_cable_route@fxfzczt",zIndex:4,fieldId:"ccr_id"},
  {code:"10",name:"电力-重要发电厂房",table:"czt_important_powerhouse",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_important_powerhouse@fxfzczt",zIndex:5,fieldId:"cip_id"},
  {code:"11",name:"通信-通信室内设备",table:"czt_comm_indoor_equipment",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_comm_indoor_equipment@fxfzczt",zIndex:5,fieldId:"ccie_id"},
  {code:"12",name:"通信-电视塔",table:"czt_tv_tower",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_tv_tower@fxfzczt",zIndex:5,fieldId:"ctt_id"},
]);
function selectLayers() {
  if(queryParams.value.dataType == '') {
    proxy.$modal.msgError("请选择数据类型");
  }else{
    removeLayerList.value = false
    layerInfo.value = {
      sInfo: queryParams.value.dataRangeProvince,
      shiInfo: queryParams.value.dataRangeCity,
      xInfo: queryParams.value.dataRangeArea,
      layerInfo: dataTypeInfoArray.value.find(item => item.code == queryParams.value.dataType)
    }
  }
}
function openSelectTool(flag) {
  if(flag) {
    openSelectBool.value = flag
    closeSelectBool.value = false
  }else{
    openSelectBool.value = flag
  }
}

function closeSelectTool() {
  openSelectBool.value = false
  closeSelectBool.value = true
  showHideLegendDivBool.value = false
  removeLayerList.value = true
}
const layerInfo = ref({})

const layerShowHideArray = ref([]);//图层是否显示数组
const showHideLegendDivBool = ref(false)
//图例
const getLegendHtml = (obj)=>{
  console.log("图例");
  layerShowHideArray.value = [{
    name: obj.name,
    legendHtml: obj.legendHtml,
    show: obj.show
  }]
  showHideLegendDivBool.value = obj.show;
}
function closeLegend() {
  if(showHideLegendDivBool.value) {
    showHideLegendDivBool.value = false
  }else{
    showHideLegendDivBool.value = true
  }
}
/** 获取省列表 */
function getProvinceData() {
  getProvince().then(response => {
    provinceData.value = response.data;
  });
}
//选择省
function chooseProvince(value) {
  queryParams.value.dataRangeCity = "";
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeCity = "";
  queryParamsNew.value.dataRangeArea = "";
  cityData.value = [];
  areaData.value = [];
  if(value==""){
    queryParamsNew.value.dataRangeProvince = "";
  }else{
    if(value=="全国"){
      queryParams.value.dataRangeProvince = value;
      queryParamsNew.value.dataRangeProvince = "";
    }else{
      let list = provinceData.value;
      for(let i=0;i<list.length;i++){
        if(list[i].name==value){
          queryParamsNew.value.dataRangeProvince = list[i].id;
          queryParams.value.dataRangeProvince = list[i].name;
          getChildArea(list[i].id).then(response => {
            cityData.value = response.data;
          });
          break;
        }
      }
    }
  }
}
//选择市
function chooseCity(value) {
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeArea = "";
  areaData.value = [];
  if(value==""){
    queryParamsNew.value.dataRangeCity = "";
  }else{
    if(value=="全部"){
      queryParams.value.dataRangeCity = value;
      queryParamsNew.value.dataRangeCity = "";
    }else{
      let list = cityData.value;
      for(let i=0;i<list.length;i++) {
        if (list[i].name == value) {
          queryParamsNew.value.dataRangeCity = list[i].id;
          queryParams.value.dataRangeCity = list[i].name;
          getChildArea(list[i].id).then((response) => {
            areaData.value = response.data;
          });
          break;
        }
      }
    }
  }
}
//选择区县
function chooseArea(value){
  if(value==""){
    queryParamsNew.value.dataRangeArea = "";
  }else{
    if(value=="全部"){
      queryParams.value.dataRangeArea = value;
      queryParamsNew.value.dataRangeArea = "";
    }else{
      let list = areaData.value;
      for(let i=0;i<list.length;i++) {
        if (list[i].name == value) {
          queryParamsNew.value.dataRangeArea = list[i].id;
          queryParams.value.dataRangeArea = list[i].name;
        }
      }
    }
  }
}
onMounted(() => {
  getProvinceData()
  setTimeout(()=>{
    // getAllDataList()
  },500)
})

</script>
<style scoped lang="scss">
  .mapDiv {
    position:absolute;top:0px;left:0px;width:100%;height:98%;
  }
  .dataLayer {
    text-align: center;
    // width: 320px;
    position: absolute;
    top: 5px;
    right: 30px;
    // background: #001b43;
    background-color: #fff;
    box-shadow: 0 0 20px #0003;
    border: 1px solid #707070;
    border-radius: 4px;
  }
  .new-uploadDiv1 {
    position: absolute;
    top: 16px;
    left: 100px;
    width: 358px;
    height: 300px;
    background-color: #fff;
    box-shadow: 0 0 20px #0003;
    border: 1px solid #707070;
    border-radius: 4px;
}
.new-fileBtn {
    position: absolute;
    // top: 240px;
    left: 20px;
    width: 70px;
}
.new-fieldInfoBtn {
    position: absolute;
    top: 260px;
    left: 10px;
    width: 70px;
    color: #107ce5;
}
.new-filesTextArea{
    position: absolute;
    // left: 80px;
    // top: 240px;
    right: -13px;
    height: 150px;
}
//图例
.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}
/*图层图例*/
.new-layerLegendDiv {
  position: absolute;
  top:20px;
  right:10px;
  width: 54px;
  /*height: 220px;*/
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
  cursor:pointer;
}
.new-layerLegendDiv p {
  padding: 10px;
  margin:0px;
}
.new-layerLegendDiv p img {
  width:25px;
  height:25px;
  margin-left: 3px;
}
.new-layerLegendDiv p span {
  width:32px;
  height:21px;
  font-size: 14px;
  color:#3a385e;
  text-align:center;
  line-height:24px;
  border:0.5px solid #f5f5f5;
}
.new-layerSelectDiv {
  position: absolute;
  top: 20px;
  right: 70px;
  width: 256px;
  //height: 110px;
  height: 70px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 18px;
  padding-right: 0px;
}
</style>